import type { Ref } from 'vue'

export function isElementNotCompletelyInViewport(element: Ref<HTMLElement>) {
  const el = element.value as HTMLElement
  console.log(el)
  if (!el) return false
  const rect = el.getBoundingClientRect()

  const viewportWidth = window.innerWidth || document.documentElement.clientWidth
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
  // 检查元素是否完全在视口外（任意一角不可见即返回 true）
  return (
    rect.right <= 0 || // 元素在视口左侧外
    rect.bottom <= 0 || // 元素在视口顶部外
    rect.left >= viewportWidth || // 元素在视口右侧外
    rect.top >= viewportHeight // 元素在视口底部外
  )
}

export function isElementTopInViewport(element: Ref<HTMLElement>) {
  const el = element.value as HTMLElement
  if (!el) return false
  const rect = el.getBoundingClientRect()
  return rect.top >= 0
}

export function camelToKebab(str: string) {
  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
}

export function kebabToCamel(str: string) {
  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
}
